import Card from '@/components/Card';
import Description from '@/components/Description';
import { getPvGridConnectedMode, getSystemElectricityPriceType } from '@/dictionary';
import { DATABASE_TYPE_ENUM, fetchDictInfo } from '@/utils';
import React, { useEffect, useState } from 'react';
import { useIntl, useModel } from 'umi';

const BaseInfo: React.FC<{
  detailInfo: API.StationInfo;
}> = ({ detailInfo }) => {
  const intl = useIntl();
  const { initialState } = useModel('@@initialState');

  const initItems = [
    {
      key: 'createTime',
      label: intl.formatMessage({
        id: 'systemManagement.siteAdministrationMenu.creationtime',
      }),
      children: '',
    },
    {
      key: 'modifyTime',
      label: intl.formatMessage({
        id: 'systemManagement.menuManagementMenu.updateTime',
      }),
      children: '',
    },
    {
      key: 'stationName',
      label: intl.formatMessage({
        id: 'systemManagement.siteAdministrationMenu.plantName',
      }),
      children: '',
    },
    {
      key: 'stationNo',
      label: intl.formatMessage({
        id: 'systemManagement.siteAdministrationMenu.plantCode',
      }),
      children: '',
    },
    {
      key: 'tenantName',
      label: intl.formatMessage({
        id: 'systemManagement.siteAdministrationMenu.tenantName',
      }),
      children: '',
    },
    {
      key: 'stationType',
      label: intl.formatMessage({
        id: 'systemManagement.siteAdministrationMenu.plantType',
      }),
      children: '',
      span: 1,
    },
    {
      key: 'priceType',
      label: intl.formatMessage({
        id: 'electricityPrice.electricityPriceType',
      }),
      children: '',
      span: 1,
    },
  ];
  if (initialState?.isPhotovoltaic) {
    initItems.push({
      key: 'photovoltaicMode',
      label: intl.formatMessage({
        id: 'electricityPrice.photovoltaicGridConnectedMode',
      }),
      children: '',
      span: 1,
    });
  }
  const [items, setItems] = useState(initItems);

  const [siteTypes, setSiteTypes] = useState([]);

  useEffect(() => {
    fetchDictInfo(DATABASE_TYPE_ENUM.SITE_TYPE).then((res) => {
      setSiteTypes(res || []);
    });
  }, []);

  useEffect(() => {
    if (detailInfo?.id) {
      const result = [...items].map((item) => {
        item.children = detailInfo[item.key];
        if (item.key === 'stationType') {
          item.children = siteTypes.find((row) => row.value === detailInfo[item.key])?.label;
        }
        if (item.key === 'priceType') {
          const priceTypeKey = detailInfo[item.key]?.toString();
          if (priceTypeKey !== undefined && priceTypeKey !== null) {
            item.children = getSystemElectricityPriceType()[priceTypeKey]?.text;
          }
        }
        if (item.key === 'photovoltaicMode') {
          const pvKey = detailInfo.energyComplex?.photovoltaicMode?.toString();
          if (pvKey !== undefined && pvKey !== null) {
            item.children = getPvGridConnectedMode()[pvKey]?.text;
          }
        }
        return item;
      });
      setItems(result);
    }
  }, [detailInfo, siteTypes]);

  return (
    <Card
      title={intl.formatMessage({
        id: 'systemManagement.siteAdministrationMenu.plantBasicInformation',
      })}
    >
      <Description items={items} />
    </Card>
  );
};
export default BaseInfo;
